import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Grid} from '@material-ui/core';
import {createMuiTheme, MuiThemeProvider, withStyles} from '@material-ui/core/styles';
import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import markdown from './markdown';

hljs.initHighlightingOnLoad();

const theme = createMuiTheme({
    typography: {
        useNextVariants: true,
    },
});

const styles = theme => ({
    container: {
        width: '100%',
        height: '100%',
        minHeight:500
    },
    rightBox: {
        overflowY: 'auto',
        height: 500,
    },
    textarea: {
        border:'none',
        fontWeight:'bolder',
        width: '100%',
        height: 500,
        resize: 'none',
        padding: 8,
        backgroundColor:'transparent',
        color: '#555',
        // outline: 'none',
        marginTop:0,
    },
    markdown: {
        padding: 12,
        width: '100%',
    }
});


class Markdown extends Component {

    state = {
        text: markdown,
        html: '',
    };

    textInput = (e) => {
        this.setState({
            text: e.target.value,
            html: marked(e.target.value)
        })
    };

    componentDidMount() {
        this.setState({
            html: marked(this.state.text)
        })
    }

    render() {
        const {classes} = this.props;

        return (
            <MuiThemeProvider theme={theme}>
                <Grid container className={classes.container}>
                    <Grid item xs={12} sm={6}>
                        <textarea defaultValue={this.state.text} onInput={this.textInput} className={classes.textarea}
                                  placeholder='写点儿什么...'/>
                    </Grid>
                    <Grid item xs={12} sm={6} className={classes.rightBox}>
                        <div className={classes.markdown} dangerouslySetInnerHTML={{__html: this.state.html}}/>
                    </Grid>
                </Grid>
            </MuiThemeProvider>
        )
    }
}

Markdown.propTypes = {
    classes: PropTypes.object.isRequired,
};


export default withStyles(styles)(Markdown);